<template>
  <div id="printBox"
       ref="print"
       class="digitalize-box"
       :style="printBox">
    <!-- <template > -->
    <template v-if="certId">
      <img v-for="item in certImgs"
           :key="item"
           :src="item"
           :style="certificateImg">
    </template>
    <!-- </template> -->
    <div :style="headerTitle">
      <div>数字化回单</div>
      <div v-if="!!ereData"
           :style="makeBox">报告创建时间：{{ ereData.signTime }}</div>
    </div>
    <div v-if="isRequest">
      <Certificate v-if="!certId"
                   :value="certificate" />
      <CertOrder :value="order" />
      <CertTransport :value="transport" />
      <CertSign :value="sign"
                :data="tableData" />
      <CertIocus v-if="isPosition"
                 :value="tableData" />
    </div>
  </div>
</template>

<script>
import cert from '@/api/modules/cert'
import Certificate from './components/Certificate.vue'
import CertOrder from './components/CertOrder.vue'
import CertTransport from './components/CertTransport.vue'
import CertSign from './components/CertSign.vue'
import CertIocus from './components/CertIocus.vue'
import print from 'print-js'

export default {
  name: 'Digitalize',
  components: { CertOrder, CertTransport, CertSign, CertIocus, Certificate },
  data () {
    return {
      cert: {},
      certImgs: [],
      isRequest: false,
      isPosition: false,
      pageIndex: 1,
      tableData: [],
      pageSize: 99999,
      carouselHeight: null,
      count: 0
    }
  },
  computed: {
    value () {
      return this.$route.query
    },
    sign () {
      return this.cert || {}
    },
    order () {
      return { certOrder: this.cert?.orderInfoResult, certEreData: this.cert?.ereData }
    },
    transport () {
      return this.cert?.devicePositionResult || {}
    },
    certificate () {
      return { ...this.cert, count: this.count, certImgs: this.certImgs }
    },
    ereData () {
      return this.cert?.ereData
    },
    certId () {
      return this.cert?.certId
    },
    printBox () {
      return {
        padding: '0',
        margin: '0'
      }
    },
    headerTitle () {
      return {
        textAlign: 'center',
        fontSize: '20px',
        fontWeight: 'bold',
        color: '#000000',
        // position: 'relative'
      }
    },
    makeBox () {
      return {
        fontSize: "14px",
        fontFamily: "PingFang SC",
        fontWeight: 400,
        lineHeight: "30px",
        color: "#666666",
        borderBottom: "1px solid #cccccc",
        // paddingBottom: "22px"
      }
    },
    certificateImg () {
      return {
        width: "100%",
        objectFit: "cover",  /* 确保图片覆盖整个容器，但不失真 */
        height: "auto"
      }
    }
  },
  mounted () {
    this.getCertChainEvidencePosition()
    this.getCertChainEvidence()
  },
  methods: {
    async getCertChainEvidence () {
      let orderId = this.value.orderId
      let response = await cert.getCertChainEvidence(orderId)
      this.count = response.data.count
      this.cert = response.data
      if (this.cert?.certId) {
        this.getCertImage(this.cert?.certId)
        return
      }
      this.handlePrint()
    },
    async getCertChainEvidencePosition () {
      let orderId = this.value.orderId
      let response = await cert.getCertPosition(orderId, this.pageIndex, this.pageSize)
      if (response?.data?.records) {
        this.tableData = response?.data?.records
        this.isPosition = true
      }
    },
    async getCertImage (certId) {
      let response = await cert.getCertBaseImage(certId)
      // let response = await cert.getCertImage(certId)
      this.certImgs = response.data
      this.handlePrint()
    },
    handlePrintDialogClose () {
      console.log('点击取消了')
      window.close();
    },
    handlePrint () {
      let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500)
      this.isRequest = true
      const style = `@media print{
        @page {size: portrait; margin: 6mm 1mm;} 
        html {height: auto; margin: 0; padding: 0;} 
        .digitalize-box { page-break-after: always; width: 100%; padding: 0px 10px; margin: 0 auto; box-sizing: border-box; height: 100%; }
      }
      `
      this.$nextTick(() => {
        print({
          printable: 'printBox',
          type: 'html',
          scanStyles: false,
          style: style,
          targetStyles: ['*'],
          onPrintDialogClose: () => {
            clearInterval(focuser)
            this.handlePrintDialogClose()
          },
        })
        // this.$print(this.$refs.print)
      })
    },
    // setCarouselHeight () {
    //   this.$nextTick(() => {
    //     const images = this.$refs.image;
    //     let totalHeight = 0;

    //     images.forEach((image) => {
    //       totalHeight += image.height;
    //     });
    //     this.carouselHeight = totalHeight
    //     console.log('Total Height:', totalHeight + 'px');
    //   });
    // }
  },
}
</script>

<style lang="scss" scoped>
#printBox {
  transform: scale(1);
}
// @media print {
//   @page {
//     size: auto A4 portrait;
//     // size: auto A4 landscape;
//     margin: 6mm 1mm;
//     mso-header: none;
//     mso-footer: none;
//   }
//   html {
//     background-color: var(--prev-bg-white);
//     height: auto;
//     margin: 0;
//     padding: 0;
//   }
//   .digitalize-box {
//     page-break-after: always;
//     width: 100%;
//     padding: 0px 10px;
//     margin: 0 auto;
//     box-sizing: border-box;
//     height: 100%;
//   }
// }
@media screen {
  .digitalize-box {
    display: none;
  }
}
</style>